<template>
  <main>
  <header></header>
  <div class="content">
    <div class="content_top">
      <ul >
        <li @click="navClick(index)" :class="{list,active:ssIndex==index }" v-for="(item,index) in navlist" :key="index ">{{item.name}}</li>
        <!-- <li>上新预告</li> -->
      </ul>
    </div>
    <div class="content_bottom">
      <content class="list" v-for="(item,index) in list" :key="index">
        <div class="left">
          <div class="left_img">
            <img :src="item.picture" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="right_top">{{item.name}}</div>
          <div class="right_center">
           买一送一明星皇堡| 用心火烤肉质紧实，鲜嫩多汁 爆爆团
          </div>
          <div class="right_bottom">
            <div class="right_bottom_left">
              <span>{{item.tunajia}}</span>
              <div class="right_bottom_left_center">
                <p>￥25<span>{{item.promotion_info}}</span></p>
                <span>￥{{item.month_saled}}</span>
              </div>
            </div>
            <div class="right_bottom_right">
              <button @click="stClick(item)">{{item.status == 0?'马上抢':'已抢'}}</button>
              <span>{{item.month_saled_content}}份</span>
            </div>
          </div>
        </div>
      </content>
    </div>
  </div>
  </main>
</template>

<script>
import { tuan_list } from "../utils/api.js"
import { tuan_lists } from "../utils/api.js"
export default {
    data(){
       return{
        ssIndex:0,
         list:[
            // {pic:'',name:'汉堡王| 北美新天地餐厅',desc:' 买一送一明星皇堡| 用心火烤肉质紧实，鲜嫩多汁 爆爆团',
            // tunajia:'爆爆团价',money:'25',zhekou:'5折',yuanjia:'50',yishou:'9029',status:'1',
            // },
            // {pic:'',name:'汉堡王| 北美新天地餐厅',desc:' 买一送一明星皇堡| 用心火烤肉质紧实，鲜嫩多汁 爆爆团',
            // tunajia:'爆爆团价',money:'25',zhekou:'5折',yuanjia:'50',yishou:'9029',status:'1'
            // },
            // {pic:'',name:'汉堡王| 北美新天地餐厅',desc:' 买一送一明星皇堡| 用心火烤肉质紧实，鲜嫩多汁 爆爆团',
            // tunajia:'爆爆团价',money:'25',zhekou:'5折',yuanjia:'50',yishou:'9029',status:'1'
            // },
            // {pic:'',name:'汉堡王| 北美新天地餐厅',desc:' 买一送一明星皇堡| 用心火烤肉质紧实，鲜嫩多汁 爆爆团',
            // tunajia:'爆爆团价',money:'25',zhekou:'5折',yuanjia:'50',yishou:'9029',status:'1'
            // },
        ],
        list2:[],
        navlist:[
            {name:'正在抢购'},
            {name:'上新预告'},
                
        ]

       }
    },
    mounted(){
      tuan_list({status:0}).then((res)=>{
        console.log(res.data);
        this.list = res.data.list
        
      })
    //   tuan_lists({status:1}).then((res)=>{
    //     console.log(res.data);
    //     this.list2 = res.data.list
        
    //   })


    },
    methods:{
        stClick(item){
            if(item.status ==0){
                item.status =1   
            }
        },
        navClick(index){
            return(this.ssIndex=index)
        }
    }
};
</script>

<style scoped>
main {
    width: 100vw;
    height: 92vh;
    overflow: auto;
}
header{
    width: 100vw;
    height: 28vh;
    /* background-color: antiquewhite; */
}
.content {
  height: 100vw;
  width: 100vw;
}
.content .content_top {
  box-sizing: border-box;
  text-align: center;
  height: 5vh;
  line-height: 5vh;
  width: 100vw;
}
.content .content_top ul {
  padding-left: 2vw;
  display: flex;
  width: 50vw;
  height: 5vh;
  line-height: 5vh;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
.content .content_top ul li {
    box-sizing: border-box;
  margin-right: 2vw;
  list-style: none;
  color: white;
}
.content .content_top ul li.active {
  border-bottom: 2px solid white;
}
.content .content_bottom {
  width: 100vw;
  height: 65wh;
}
.content .content_bottom .list {
  margin: 2vh auto;
  border-radius: 2vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 95vw;
  height: 22vh;
  background-color: rgb(255, 255, 255);
}
.content .content_bottom .list .left {
  margin: 0 2vw;
  width: 42vw;
}
.content .content_bottom .list .left img {
  border-radius: 5px;
  width: 100%;
}
.content .content_bottom .list .right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.content .content_bottom .list .right .right_top {
  font-size: 12px;
  color: rgb(143, 143, 143);
}
.content .content_bottom .list .right .right_center {
  font-size: 14px;
  color: rgb(0, 0, 0);
}
.content .content_bottom .list .right .right_bottom {
  display: flex;
  width: 90%;
  justify-content: space-between;
  font-size: 12px;
  color: rgb(255, 0, 0);
}
.content .content_bottom .list .right .right_bottom_left {
  /* margin-top: -3vh; */
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: rgb(255, 0, 0);
}
.content .content_bottom .list .right .right_bottom_left_center {
  font-size: 18px;
  color: rgb(255, 0, 0);
}
.content
  .content_bottom
  .list
  .right
  .right_bottom_left_center
  span:nth-child(1) {
  border: 0.1333vw solid rgb(244, 143, 12);
  font-size: 12px;
  border-radius: 3px;
  margin-left: 1vw;
}
.content
  .content_bottom
  .list
  .right
  .right_bottom_left_center
  span:nth-child(2) {
  font-size: 12px;
  color: rgb(112, 112, 112);
  text-decoration: line-through;
}
.content .content_bottom .list .right .right_bottom_right {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.content .content_bottom .list .right .right_bottom_right button {
    width: 20vw;
    height: 8vw;
    background-color: red;
    border-radius: 25vw;
    color: white;
    margin-bottom: 1vh;
}
</style>